/***********************************************************************
** Copyright (C) 2011 Anthony Naddeo <anthony.naddeo@gmail.com>
**
** This file is part of linkedup
**
** linkedup is free software; you can redistribute it and/or modify
** it under the terms of the GNU General Public License as published by
** the Free Software Foundation; either version 3 of the License, or
** (at your option) any later version.
**
** linkedup is distributed in the hope that it will be useful,
** but WITHOUT ANY WARRANTY; without even the implied warranty of
** MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
** GNU General Public License for more details.
**
** You should have received a copy of the GNU General Public License
** along with this package; If not, see <http://www.gnu.org/licenses/>.
**
***********************************************************************/

import QtQuick 1.1
import com.meego 1.0

/**
  Create a section composed that looks like this


  Title                [..x.....]
  -------------------------------
  Content Content Content Content
  Content Content Content Content


  The Title and Content are "Label"s by default, and
  setting the titleText and contentText property modifies them.
  Alternatively, you can set the title and content components
  with another that you prefer.

  Make sure the width is actually set (relevant if using as delegate)
  */

Item {
	id: root
	width: parent.width
	height: column.height

	signal linkActivated(string link) //only called if content is label

	property string titleText : "Title"
	property string contentText : "Content"
	property int titleTextSize: 40
	property int contentTextSize: 24

	/**properties for the image that indicates
		a section scrolls left and right*/
	property bool indicateScrollable: list
	property string previousScrollImage: "image://theme/icon-m-toolbar-previous"
	property string nextScrollImage: "image://theme/icon-m-toolbar-next"

	/**properties for the alternate list**/
	/*I made list a bool instead of a component so that
	you can use it when creating inside of javascript like so:

	var object = comp.createObject(parent, {"list":true})

	because the following does not work

	var object = comp.createObject(parent, {"content":list})

	It won't be able to find list as a component even thought
	it belongs to the item... slight hack. This depends on
	QtQuick 1.1 and up

	*/
	property bool list: false
	property QtObject listModel
	property Component listDelegate

	property Component title: Label {
		font.pixelSize: titleTextSize
		text: titleText
		wrapMode: Text.Wrap
	}

	property Component scrollIndicator: Row{
		spacing: 10
		Repeater{
			model: listModel.count
			Rectangle{
				property string baseColor: theme.inverted ? "white" : "black"
				property string hilightColor: theme.inverted ? "blue" : "red"
				radius: 50
				color: contentLoader.item.currentIndex == index ? hilightColor : baseColor
				width: 5
				height: width
			}
		}

	}

	/**
	  If you don't want to use my label or my list, then just
	  define your own component and set it to this content property

	  content: myComponent

	  The component should not define any of it's anchors as my loader
	  does that for it.
	  */
	property Component content: list ? listComponent : labelComponent

	/**
	  This label is used by default.
	  Set the text by setting the following

	  titleText: "Title"
	  contentText: "This is my content..."
	  */
	Component{
		id: labelComponent
		Label {
			text: contentText
			font.pixelSize: contentTextSize
			wrapMode: Text.Wrap
			onLinkActivated: root.linkActivated(link)
		}
	}


	/**
	  You may wish to display more than just a Label as the content.
	  As a convenience, I've configured a ListView to be able to
	  replace it. This list will appear as the label did, but will
	  scroll horizontally to show more items. Do the following to
	  use this list instead of a Label and provide an appropriate
	  delegate and list. The delegate should consist of one or more
	  labels to meet my look and feel intentions.

	  list: true
	  listModel: myModel
	  listDelegate: myComponent

	  note: You need to make sure the components widht is the same
	  as the lists width. This can be accomplished one of  two ways.

	  1. In the delegate's root item (when you define)
			width: ListView.view.width
	  2. When you create the component
			width: list.width
	  */
	Component{
		id: listComponent
		ListView{
			interactive: listModel.count > 1
			preferredHighlightBegin: 0;
			preferredHighlightEnd: 0;
			highlightRangeMode: ListView.StrictlyEnforceRange
			orientation: ListView.Horizontal;
			onCurrentIndexChanged: height = currentItem.height
			snapMode: ListView.SnapOneItem
			Behavior on height {NumberAnimation{duration: 250}}

			delegate: listDelegate
			model: listModel
		}
	}

	Column{
		id: column
		width: root.width
		spacing: 10
		Loader{sourceComponent: title
			anchors.right: parent.right
			anchors.left: parent.left
			Loader{
				anchors.right: parent.right
				anchors.verticalCenter: parent.verticalCenter
				sourceComponent: indicateScrollable  && listModel.count > 1 ? scrollIndicator : undefined
			}
		}
		Rectangle {
			height: 1
			color: theme.inverted ? "white" : "black"
			anchors.right: parent.right
			anchors.left: parent.left
		}
		Loader{id: contentLoader
			sourceComponent: content
			anchors.right: parent.right
			anchors.left: parent.left
		}
	}


}
